<script lang="ts" name="person-new" setup>
import { ref,watch,watchEffect } from 'vue'

let temp = ref(10)
let height = ref(0)

function changeTemp() {
  temp.value += 10
}
function changeHeight() {
  height.value += 10
}

/*
* watch 监视那个就指定哪个
* watchEffect 不用明确指出,函数用哪个自动站指定哪个
* */

//监视数据
// watch([temp,height], (value) => {
//   console.log(value)
//   //从value中获取最新水温和水位
//   let [newTemp, newHeight] = value
//   if(newTemp >= 60 || newHeight>= 80) {
//     console.log('已发送')
//   }
// })

//监视,---watchEffect监视
watchEffect(() => {
  if(temp.value >= 60 || height.value >= 80) {
    console.log('已发送')
  }
})
</script>

<template>
  <div class="person">
    <h1>需求:当水温达到60度时,或水位达到80cm时,给服务器发送请求</h1>
    <h2>当前水温为: {{ temp }} ℃</h2>
    <h2>当前水位为: {{ height }}㎝</h2>
    <button @click="changeTemp">水温 + 10</button>
    <button @click="changeHeight">水位 + 10</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>